<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <meta name="author" content="Zhang Cheng">
		<title></title>
		<script src="js/vue.js" ></script>
		<style>
			.ball{
				background-color: red;
				width: 15px;
				height: 15px;
				border-radius: 15px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="button" value="加入购物车" @click="flag=!flag"/>
			<transition 
				@before-enter="beforeEnter"
				@enter="enter"
				@after-enter="afterEnter">
				
				<div class="ball" v-show="flag"></div>
			</transition>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					flag:false
				},
				methods:{
					//动画钩子函数的第一个参数 el 表示要执行动画的那个DOM 元素 是个原生的Js对象
					beforeEnter(el){
						//表示动画入场之前此时动画尚未开始，可以在beforeEnter中设置动画元素起始的元素样式；
						el.style.transform="translate(0,0)";
					},
					enter(el,done){
						//不写这句话不会触发动画的轨迹
						
						//el.offsetWidth; 会强制动画渲染
						el.offsetWidth;
						
						
						//表示动画开始之后的状态这里可以设置动画元素完成动画之后的状态
						el.style.transform="translate(150px,450px)";
						el.style.transition="all 0.8s ease";
						
						//done 其实就是afterEnter函数，调用done函数其实就是afterEnter函数的引用
						done();
					},
					afterEnter(el){
						//动画完成之后会调用afterEnter
						//this.flag=!this.flag;
						//使用opactiy无法实现小球过长动画
						//vue将一个完整的动画过程使用钩子函数拆分成了两部分
						//我们使用flag标识符，来表示动画的切换；
						//虽然看不到后半程动画的执行，但是，依旧是执行了后半程动画的。所以为了不再执行后半程动画，所以对flag取非
						//el.style.opacity = 0
						//以下语句第一个功能是控制小球的显示与隐藏，第二个功能是直接跳过后半程动画，让flag直接变为false，
						this.flag=!this.flag;
					}
				}
			});
		</script>
	</body>
</html>